1. Prepros

• 功能：Prepros 是一個圖形化界面的工具，可以自動編譯 SASS，並生成對應的 CSS，它支持多種預處理器，還提供自動刷新功能
• 應用場景：用於設置和管理小型項目，尤其適合那些不喜歡使用命令行的開發者
• 使用方法：
  a. 安裝 Prepros
  b. 將你的 SASS 文件夾拖到 Prepros 中
  c. Prepros 自動檢測並編譯 SASS 文件，生成 CSS
• 優點：簡單易用的界面，自動編譯功能，支持多語言（如 LESS、CoffeeScript 等）
• 缺點：相對較重的應用程序，可能不適合大型項目
• 範例：更新 .scss 文件時，Prepros 自動生成對應的 .css，無需手動執行命令

2. Visual Studio Code + Live Sass Compiler 插件

• 功能：Live Sass Compiler 是一個 VS Code 的插件，可以在保存時自動編譯 SASS 文件並生成 CSS
• 應用場景：適合使用 Visual Studio Code 進行開發的開發者
• 使用方法：
  a. 在 VS Code 中安裝 "Live Sass Compiler" 插件
  b. 打開你的 .scss 文件，點擊右下角的 "Watch Sass" 按鈕，SASS 文件會自動編譯為 CSS
• 優點：集成在開發環境中，輕量快捷
• 缺點：功能有限，不提供圖形化界面或文件監控的高級功能
• 範例：在編輯 .scss 文件後保存時，VS Code 會自動生成 .css 文件，並實時刷新瀏覽器

3. Gulp

• 功能：Gulp 是一個基於 JavaScript 的自動化構建工具，常用於處理任務如編譯 SASS、壓縮 CSS、圖片壓縮等
• 應用場景：適用於大型項目，能夠進行多種任務自動化
• 使用方法：
  a. 安裝 Gulp：npm install gulp gulp-sass --save-dev
  b. 創建 gulpfile.js，編寫自動編譯 SASS 的程式碼
• 優點：靈活且可擴展，適合大型項目的構建與管理
• 缺點：需要學習 Gulp 的 API 和 JavaScript
• 範例
  const gulp = require('gulp');
  const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
return gulp.src('sass//*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
gulp.watch('sass//*.scss', gulp.series('sass'));
});
這段 Gulp 任務會自動監控 sass/ 目錄下的 .scss 文件，當文件變更時自動編譯為 .css

4. Webpack + Sass Loader

• 功能：Webpack 是一個強大的模塊打包工具，可以使用 sass-loader 編譯 SASS，並將其與其他資源打包到一起

• 應用場景：適合前端工程化開發，尤其是單頁應用程序（SPA）和大型項目

• 使用方法：
  a. 安裝 Webpack 和相關插件：npm install sass-loader css-loader style-loader webpack --save-dev
  b. 在 Webpack 配置文件中設置 sass-loader

• 優點：與現代前端框架（如 React、Vue）結合良好，適合大型應用

• 缺點：配置相對複雜，初學者可能需要時間熟悉

• 範例 :
  module.exports = {
  module: {
  rules: [
  {
  test: /.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  },
  ],
  },
  };

• 這會自動將 SASS 文件轉換為 CSS，並通過 Webpack 注入到 HTML 頁面中